<!-- 编辑弹窗 -->
<template>
  <ele-modal
    inner
    fullscreen
    :visible="visible"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="'采购单列表'"
    @update:visible="updateVisible" :before-close="handleClose"
  >
    <div class="ele-body">
      <purorderSearch @search="reload"  />
      <el-card>
      <!-- 搜索表单 -->
      <el-row :gutter="24">
        <el-col  :md="15" :sm="24">
          <ele-pro-table ref="table"  row-key="id"  sub-title="未选采购单:" :toolkit="[]"  :columns="allorderColumns"  :datasource="datasource"   @done="onDone" :need-page="true"  :height="tableHeight" :full-height="tableFullHeight">
            <template v-slot:toolkit>
              <el-button size="mini" class="ele-btn-icon">
                全部添加
              </el-button>
            </template>
            <!-- 标题列 -->
            <template slot="ss" slot-scope="{ row }">
              <!-- <el-checkbox-group v-model="row.checkContainerNumberItems">
                <el-checkbox v-for="item in row.containerNumberItems" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group> -->
              <el-select multiple filterable v-model="row.checkContainerNumberItems" class="ele-fluid" >
                <el-option v-for="item in row.containerNumberItems" :key="item" :label="item" :value="item" />
              </el-select>
            </template>
            <template v-slot:action="{ row }">
              <el-button size="mini" @click="add(row)">添加</el-button>
            </template>
          </ele-pro-table>
        </el-col>
        <el-col  :md="9" :sm="24">
          <ele-pro-table ref="choosetable"  row-key="id,checkContainerNumberItems"   sub-title="已选采购单:" :toolkit="[]"   :columns="chooseOrderColumns"  :datasource="choosePurOrderDatas"   :need-page="false"  :height="tableHeight" :full-height="tableFullHeight">
            <template v-slot:toolkit>
              <el-button size="mini" class="ele-btn-icon" @click="removeAll" type="danger">
                全部删除
              </el-button>
            </template>
            <template v-slot:action="{ row }">
              <el-button size="mini" type="danger" @click="remove(row)">删除</el-button>
            </template>
            <template slot="ss" slot-scope="{ row }">
              <span>{{ row.checkContainerNumberItems.join(",") }}</span>
            </template>
          </ele-pro-table>
        </el-col>
      </el-row>
      
      </el-card>
    </div>
    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="save" >
        确定
      </el-button>
    </div>
  </ele-modal>
</template>

<script>
  
  import purorderSearch from './purchoose-search.vue';
  import { ChoosePurOrder } from '@/api/inventory/inorder';
  import { QueryChoosePurorderByCondition } from '@/api/businesshandling/purordermanager';
 
  export default {
    name: 'instockPurChooseList',
    components: {purorderSearch},
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    data() {
      return {
        fixedHeight:true,
        // 表单数据
        form: {},
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        //表格选中数据(多选)，如果要回显选中数据可在 done 事件里面使用 setSelectedRowKeys 方法
        choosePurOrderDatas:[],
        // 表格列配置
        allorderColumns: [
          { columnKey: 'action',label: '操作',width: 80,align: 'center',slot: 'action'},
          {prop: 'orderNo', label: '订单号', width: 120, showOverflowTooltip: true, align: 'center',},
          {prop: 'supplierDesc', label: '供应商',width: 120,  showOverflowTooltip: true,align: 'center',},
          {prop: 'billNumber', label: '提单号', width: 100, showOverflowTooltip: true, align: 'center',},
          {
            prop: 'deliveryDate', label: '发货日期',width: 100, showOverflowTooltip: true, align: 'center',
            formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
          },
          {prop: 'purAmount', label: '采购金额',width: 100, showOverflowTooltip: true, align: 'center',},
          {prop: 'checkContainerNumberItems', label: '箱号',slot:'ss',width: 200, showOverflowTooltip: true, align: 'center',},
        ],
        // 表格列配置
        chooseOrderColumns: [
          {columnKey: 'action',label: '操作',width: 80,align: 'center',slot: 'action'},
          {prop: 'orderNo', label: '订单号', showOverflowTooltip: true, align: 'center',},
          {prop: 'supplierDesc', label: '供应商', showOverflowTooltip: true,align: 'center',},
          {prop: 'checkContainerNumberItems', label: '箱号',slot:"ss", width: 200,showOverflowTooltip: true, align: 'center',},
        ],
      };
    },

    computed: {
      // 表格高度
      tableHeight() {
        var fh = this.fixedHeight ? 'calc(100vh - 380px)' : void 0;
        return fh;
      },
      // 表格全屏时高度
      tableFullHeight() {
        var fh =  this.fixedHeight ? 'calc(100vh - 280px)' : null;
        return fh;
      },
    },
   created(){
   },
    methods: {
      
      /* 表格数据源 */
      async datasource(params) {
        
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        // if(!params.where.conditions)  params.where.conditions = [];
        // params.where.conditions.push({ key:"status",operator: 0,value: 5,});
        // params.where.conditions.push({ key:"deleted",operator: 0,value: 0,});
        // params.where.conditions.push({ key:"inStockStatus",operator: 10,value: 5})

        let data = await QueryChoosePurorderByCondition(params.where);

        return {
            list:data.items,
            count:data.totalrecords,
        };
      },

      save(){

        if(this.choosePurOrderDatas.length==0){
          this.$message({
            message: '没有选择采购单',
            type: 'warning'
          });
        }else{

          const res = [];
          this.choosePurOrderDatas.filter((item)=>{
            if(res.length>0){
            //   res.map((m)=>{ 
            //   if(m.purOrderId != item.id && m.containerNumber.join(",") != item.checkContainerNumberItems.join(",") ) {
            //     res.push({'purOrderId':item.id,'containerNumber':item.checkContainerNumberItems})
            //   }
            // });
              item.checkContainerNumberItems.map((i)=>{
               let index = res.findIndex((f)=>{ 
                return f.purOrderId == item.id && f.containerNumber ==i 
              })

               if(index<0){
                res.push({'purOrderId':item.id,'containerNumber':i})
               }
              })
            }else{
              item.checkContainerNumberItems.map((i)=>{
                res.push({'purOrderId':item.id,'containerNumber':i})
              })
            }
          });

          let inorderParam = {
            chooseParms : [{'purOrderId':'','containerNumber':''}]
          }
          inorderParam.chooseParms = res
          ChoosePurOrder(inorderParam).then((d)=>{
            this.$emit('callback',d );
            this.$emit('update:visible', false);
          });


          
        }
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {

      },
      /* 刷新表格 */
      reload(where) {
        if(this.$refs.table){
          this.$refs.table.reload({ where: where });
        }
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
        this.choosePurOrderDatas=[];
      },

      handleClose() {
        //更新父组件中的visible的值
        this.$emit('update:visible', false);
        this.choosePurOrderDatas=[];
      },
      
      /* 添加 */
      add(row) {

        if(row.checkContainerNumberItems.length>0){
          this.choosePurOrderDatas.push(row);
        }else{
          this.$message.error('请选择箱号');
        }
      },
      /* 移除 */
      remove(row) {
        this.choosePurOrderDatas.splice(this.choosePurOrderDatas.indexOf(row), 1);
      },
      /* 移除所有 */
      removeAll() {
        this.choosePurOrderDatas.splice(0, this.choosePurOrderDatas.length);
      }

    },
    /* 监听visible属性变化 */
    watch: {
      visible(visible) {
        this.choosePurOrderDatas=[];
        if(this.$refs.table){
            this.reload();
          }
      }
    }
  };
</script>
<style scoped>

  
  </style>